<template>
  <div class="task-detail-header">
    <div class="header-content">
      <el-image @click="imageShow" :src="project?.projectLogo || '/src/assets/img/task.png'" />
      <el-dialog v-model="dialogVisible" align-center style="width: 60%; text-align: center">
        <img
          style="width: 80%; height: 45%; overflow: hidden"
          :src="project?.projectLogo || '/src/assets/img/task.png'"
          alt="logo"
        />
      </el-dialog>
      <div class="text-content">
        <span class="iconfont">
          <el-icon><Coin /></el-icon>
          {{ task.taskScore }}
        </span>
        <h1>
          {{ task.taskName }}
        </h1>
        <div class="roles">
          招募角色
          <div class="needRole">
            <div
              class="role"
              v-for="role in getProjectRoles(task.taskRole)"
              :key="role"
              style="margin-right: 5px"
            >
              {{ role }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="trait">
      <el-space :size="size" :spacer="spacer">
        <span>
          类型<span class="data" v-for="type in getProjectTypes(project?.projectType)" :key="type">
            {{ type }}
          </span>
        </span>
        <span>
          客户端<span v-for="client in project?.adaptation" :key="client" class="data">{{
            client
          }}</span>
        </span>
        <span v-if="project?.frame">
          框架<span class="data">{{ task?.frame }}</span>
        </span>
        <span v-if="project?.container">
          容器<span class="data">{{ task?.container }}</span>
        </span>
        <span v-if="project?.developLanguage">
          开发语言<span class="data">{{ task?.developLanguage }}</span>
        </span>
        <span>
          周期<span class="data">{{ task.taskPeriod === 0 ? 1 : task.taskPeriod }}天</span>
        </span>
        <span v-if="task.taskState === 1">
          投标人数<span class="data">{{ bidderCount }}人</span>
        </span>
      </el-space>
    </div>
    <div class="begin" v-if="task.taskState === 0">待发布</div>
    <div class="joining" v-else-if="task.taskState === 1">招募中</div>
    <div class="building" v-else-if="task.taskState === 2">实施中</div>
    <div class="end" v-else-if="task.taskState === 3">已完成</div>
    <div
      class="join-button"
      v-show="task.taskState === 1 && project.userId !== useUserStore().userMessage.userId"
      :style="{ backgroundColor: props.isJoined ? '#f56c6c' : '#008ed0' }"
      @click="handleJoinTask()"
    >
      {{ joinButtonContent }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, h, ref } from 'vue'
import { ElDivider } from 'element-plus'
import { codeToProjectType } from '@/mock/tasksquare'
import { codeToCharacters } from '@/mock/tasksquare'
import useUserStore from '@/store/user/user'
import { showImagePreview } from 'vant'
const props = defineProps(['task', 'project', 'isJoined'])
const bidderCount = computed(() => {
  if (!props.task.taskBid) return 0
  return props.task.taskBid.split(',').length
})
const size = ref(5)
const spacer = h(ElDivider, { direction: 'vertical' })
const joinButtonContent = computed(() => (props.isJoined ? '取消投标' : '投标任务'))
const emit = defineEmits(['update-task'])
const dialogVisible = ref(false)
const imageShow = () => {
  showImagePreview({
    images: [props.project?.projectLogo || '/src/assets/img/task.png'],
    closeable: true,
    showIndex: false
  })
}
const handleJoinTask = () => {
  emit('update-task')
}
function getProjectRoles(roleCodes: string) {
  if (!roleCodes) return []
  return roleCodes.split('').map((code) => codeToCharacters[code])
}
function getProjectTypes(typeCodes: string) {
  if (!typeCodes) return []
  return typeCodes.split('').map((code) => codeToProjectType[code])
}
</script>

<style lang="less" scoped>
.header-content {
  display: flex;
  align-items: flex-start;
  .el-image {
    width: 160px;
    height: 90px;
    border-radius: 5px;
    margin-right: 20px;
    overflow: hidden;
    cursor: pointer;
  }
  .text-content {
    display: flex;
    flex-direction: column;
    .iconfont {
      color: #f74882;
    }
    h1 {
      font-size: 24px;
    }
  }
}
.roles {
  display: flex;
  align-items: center;
  margin: 10px 0;
  .needRole {
    display: flex;
    flex-wrap: wrap;
  }
  .role {
    background-color: #008ed0;
    color: #fff;
    border-radius: 4px;
    margin: 0 5px;
    padding: 5px;
  }
}

.trait {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 0;
  font-size: 13px;
  .el-space {
    flex-wrap: wrap; /* 允许el-space内部元素换行 */
    align-items: center; /* 垂直居中对齐 */
    .el-space__item>* {
      margin-bottom: 5px;
    }
    .data {
      margin-left: 10px;
      color: #808080;
      white-space: nowrap; /* 防止数据内部换行 */
      overflow: hidden;
      text-overflow: ellipsis; /* 当文本溢出时显示省略符号 */
    }
  }
}

.begin {
  position: absolute;
  top: 5px;
  right: 20px;
  padding: 5px;
  color: #008ed0;
  font-size: 25px;
  border-radius: 4px;
}

.joining {
  position: absolute;
  top: 5px;
  right: 20px;
  padding: 5px;
  color: #009903;
  font-size: 25px;
  border-radius: 4px;
}

.building {
  position: absolute;
  top: 5px;
  right: 20px;
  padding: 5px;
  color: #adac00;
  font-size: 25px;
  border-radius: 4px;
}

.end {
  position: absolute;
  top: 5px;
  right: 20px;
  padding: 5px;
  color: #ff0000;
  font-size: 25px;
  border-radius: 4px;
}

.join-button {
  position: absolute;
  bottom: 40px;
  right: 20px;
  padding: 10px 20px;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}
</style>
